<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配核心：viewport + 弹性布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>奠礼尾款结算表</title>
    <style>
        /* 全局重置与基础风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "思源黑体", "微软雅黑", sans-serif;
        }
        body {
            background-color: #f7f9fa;
            color: #333;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        h1, h2 {
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
            color: #1c3f6c; /* 参考图深蓝色标题 */
        }

        /* 表单区域：响应式 + 简洁风格 */
        .form-group {
            margin-bottom: 18px;
            display: flex;
            flex-direction: column; /* 手机端垂直排列更友好 */
        }
        label {
            font-weight: 500;
            margin-bottom: 5px;
            color: #444;
        }
        input, select {
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            outline: none;
            transition: border-color 0.3s;
        }
        input:focus, select:focus {
            border-color: #1c3f6c;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap; /* 手机端自动换行 */
            margin-bottom: 10px;
        }
        .btn {
            padding: 9px 18px;
            background-color: #1c3f6c; /* 深蓝色按钮 */
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 15px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #163052;
        }
        .btn:active {
            transform: scale(0.98);
        }

        /* 动态项目容器：增加/删减项目的输入组 */
        .item-container {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .input-group {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 6px;
            border: 1px dashed #ddd; /* 虚线边框更轻盈 */
        }
        .input-group input {
            flex: 1;
            width: auto; /* 适应容器宽度 */
        }

        /* 表格区域：参考图「浅灰虚线+深灰表头」风格 */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 20px;
            background-color: #fff;
        }
        th, td {
            padding: 12px 8px;
            text-align: center;
            border-bottom: 1px dashed #ccc; /* 虚线分隔行 */
            border-right: 1px dashed #ccc;
            font-size: 14px;
        }
        th {
            background-color: #6c7a89; /* 深灰表头 */
            color: #fff;
            font-weight: 500;
        }
        /* 最后一列和最后一行取消右边框/下边框，避免重复 */
        td:last-child, th:last-child {
            border-right: none;
        }
        tr:last-child td {
            border-bottom: none;
        }

        /* 标题行合并（最终尾款） */
        .total-row {
            background-color: #6c7a89;
            color: #fff;
            font-weight: 600;
        }
        .total-amount {
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #d92d20; /* 参考图红色尾款 */
        }

        /* 响应式：手机端特殊处理 */
        @media (max-width: 576px) {
            .container {
                width: 95%;
                padding: 15px;
            }
            .form-group {
                margin-bottom: 15px;
            }
            .input-group {
                flex-direction: column; /* 手机端输入组垂直排列 */
                gap: 5px;
            }
            table {
                display: block;
                overflow-x: auto; /* 表格横向滚动 */
                white-space: nowrap;
            }
            th, td {
                font-size: 13px;
                padding: 10px 6px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>奠礼尾款结算表生成器</h1>
        <!-- 输入表单 -->
        <form id="settlementForm">
            <div class="form-group">
                <label for="name">逝者姓名：</label>
                <input type="text" id="name" placeholder="如：李善珍" required>
            </div>
            <div class="form-group">
                <label for="gender">性别：</label>
                <select id="gender" required>
                    <option value="先生">先生</option>
                    <option value="女士">女士</option>
                </select>
            </div>
            <div class="form-group">
                <label for="contractAmount">合同金额：</label>
                <input type="number" id="contractAmount" placeholder="元（如：23918）" required>
            </div>
            <div class="form-group">
                <label for="downPayment">首付款：</label>
                <input type="number" id="downPayment" placeholder="元（如：10000）" required>
            </div>

            <!-- 增加项目区域 -->
            <div class="form-group">
                <label>增加项目：</label>
                <div class="btn-group">
                    <button type="button" class="btn" onclick="addItem('add')">添加增加项目</button>
                </div>
                <div id="addItemsContainer" class="item-container"></div>
            </div>

            <!-- 删减项目区域 -->
            <div class="form-group">
                <label>删减项目：</label>
                <div class="btn-group">
                    <button type="button" class="btn" onclick="addItem('delete')">添加删减项目</button>
                </div>
                <div id="deleteItemsContainer" class="item-container"></div>
            </div>

            <div class="form-group" style="text-align: center;">
                <button type="button" class="btn" onclick="generateTable()">生成结算表</button>
            </div>
        </form>

        <!-- 表格展示容器 -->
        <div id="tableContainer"></div>
    </div>

    <script>
        // 动态添加「增加项目/删减项目」的输入框组
        function addItem(type) {
            const containerId = type === 'add' ? 'addItemsContainer' : 'deleteItemsContainer';
            const container = document.getElementById(containerId);
            const inputGroup = document.createElement('div');
            inputGroup.className = 'input-group';
            inputGroup.innerHTML = `
                <input type="text" placeholder="项目名称（如：花篮3个）" />
                <input type="number" placeholder="金额（元）" />
                <button type="button" class="btn" style="background:#ff6f61;" onclick="this.parentNode.remove()">删除</button>
            `;
            container.appendChild(inputGroup);
        }

        // 生成并渲染结算表
        function generateTable() {
            // 1. 获取基础输入值
            const name = document.getElementById('name').value.trim();
            const gender = document.getElementById('gender').value;
            const contractAmount = parseFloat(document.getElementById('contractAmount').value) || 0;
            const downPayment = parseFloat(document.getElementById('downPayment').value) || 0;

            // 2. 读取「增加项目」
            const addItems = [];
            const addContainers = document.getElementById('addItemsContainer').getElementsByClassName('input-group');
            for (let i = 0; i < addContainers.length; i++) {
                const nameInput = addContainers[i].querySelector('input[type="text"]');
                const amountInput = addContainers[i].querySelector('input[type="number"]');
                addItems.push({
                    name: nameInput.value.trim(),
                    amount: parseFloat(amountInput.value) || 0
                });
            }

            // 3. 读取「删减项目」
            const deleteItems = [];
            const deleteContainers = document.getElementById('deleteItemsContainer').getElementsByClassName('input-group');
            for (let i = 0; i < deleteContainers.length; i++) {
                const nameInput = deleteContainers[i].querySelector('input[type="text"]');
                const amountInput = deleteContainers[i].querySelector('input[type="number"]');
                deleteItems.push({
                    name: nameInput.value.trim(),
                    amount: parseFloat(amountInput.value) || 0
                });
            }

            // 4. 计算逻辑（尾款 = 合同金额 - 首付 + 增加总和 - 删减总和）
            const addTotal = addItems.reduce((sum, item) => sum + item.amount, 0);
            const deleteTotal = deleteItems.reduce((sum, item) => sum + item.amount, 0);
            const finalAmount = contractAmount - downPayment + addTotal - deleteTotal;

            // 5. 生成表格HTML（复刻参考图结构：原方案→增加→删减→尾款）
            let tableHTML = `
                <h2>${name}${gender}奠礼尾款结算</h2>
                
                <!-- 原方案表格 -->
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>原方案</th>
                            <th>价格（元）</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>方案合同款</td>
                            <td>+${contractAmount.toFixed(2)}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>首付款</td>
                            <td>-${downPayment.toFixed(2)}</td>
                        </tr>
                    </tbody>
                </table>
            `;

            // 增加项目表格（有内容时渲染）
            if (addItems.length > 0) {
                tableHTML += `
                    <table style="margin-top: 20px;">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>增加项目</th>
                                <th>价格（元）</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                addItems.forEach((item, index) => {
                    tableHTML += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.name || '（未命名）'}</td>
                            <td>+${item.amount.toFixed(2)}</td>
                        </tr>
                    `;
                });
                tableHTML += `</tbody></table>`;
            }

            // 删减项目表格（有内容时渲染）
            if (deleteItems.length > 0) {
                tableHTML += `
                    <table style="margin-top: 20px;">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>删减项目</th>
                                <th>价格（元）</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                deleteItems.forEach((item, index) => {
                    tableHTML += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.name || '（未命名）'}</td>
                            <td>-${item.amount.toFixed(2)}</td>
                        </tr>
                    `;
                });
                tableHTML += `</tbody></table>`;
            }

            // 最终尾款模块（参考图红色大字）
            tableHTML += `
                <div class="total-amount">
                    最终尾款：${finalAmount.toFixed(2)} 元
                </div>
            `;

            // 6. 渲染到页面
            document.getElementById('tableContainer').innerHTML = tableHTML;
        }
    </script>
</body>
</html>